<!--
 * @Descripttion: 需求管理
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-05 14:18:34
 * @LastEditors: GW
 * @LastEditTime: 2021-09-03 15:22:39
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!--按钮-->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="addEdit(1)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="addEdit(2)">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="handleDelete">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                        <!-- <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="handleSearch">
                                <a-icon class="btns-icon" type="file-search" />
                                <div class="btns-text">查询</div>
                            </div>
                        </a-col> -->
                    </a-col>
                </a-row>
            </div>
            <section class="content-research-set-wrapper">
                <a-table id="researchSetTable" :columns="columns" :data-source="dataSource" :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange,columnWidth:20 }" :customRow="customClick" :scroll="{x:800,y:500}" :pagination="false" bordered>

                </a-table>
            </section>

            <!--新增、修改弹窗-->
            <drag-modal class="research-drag-wrapper" v-model="operationModal" :title="mouseId?'修改项目':'新增项目'" @cancel="cancel" width="800px">
                <a-form-model class="demand-modal" :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" @submit="handleSubmitText">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item label="项目名称" :rules="[{ required: true, trigger:'input'}]">
                                <a-input placeholder="请输入名称" v-model="requestData.name" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="项目编码">
                                <a-input placeholder="请输入编码" v-model="requestData.code" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="负责人">
                                <a-input placeholder="请输入负责人" v-model="requestData.leadUserName" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="开始时间">
                                <a-date-picker style="width:220px" @change="onChangeDateA" v-model="requestData.startDate"/>
                                <!-- <a-range-picker @change="onChangeDate" v-model="requestDataDate" :value="[moment(requestData.startDate, 'YYYY-MM-DD'), moment(requestData.endDate, 'YYYY-MM-DD')]" /> -->
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="结束时间">
                                <a-date-picker style="width:220px" @change="onChangeDateB" v-model="requestData.endDate"/>
                                <!-- <a-range-picker @change="onChangeDate" v-model="requestDataDate" :value="[moment(requestData.startDate, 'YYYY-MM-DD'), moment(requestData.endDate, 'YYYY-MM-DD')]" /> -->
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="版本号">
                                <a-input v-model="requestData.version" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="项目描述">
                                <a-input v-model="requestData.remark" placeholder="请输入描述" type="textarea" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
                <template slot="footer">
                    <a-button type="primary" @click="handleSave">保存</a-button>
                    <a-button @click="cancel" class="margin-left-10">关闭</a-button>
                </template>
            </drag-modal>
        </div>
    </div>
</template>

<script>
import { getListApi, removeApi, saveApi } from "@/api/research/set";

import { Controlwidth } from "@/utils/antTableComponents";
import { mapState } from 'vuex';
import moment from "moment";
export default {
    data () {
        return {
            //----------↓样式----------
            btnGrid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            operationModal: false,//新增修改弹窗
            columns: [{
                title: "序号",
                dataIndex: "index",
                key: "index",
                width: 40,
                align: 'center',
                customRender: (text, row, index) => {
                    return index + 1;
                }
            },
            {
                title: "项目名称",
                dataIndex: "name",
                key: "name",
                width: 120,
            }, {
                title: "项目编码",
                dataIndex: "code",
                key: "code",
                width: 120,
            }, {
                title: "项目负责人",
                dataIndex: "leadUserName",
                key: "leadUserName",
                width: 120,
            }, {
                title: "项目开始时间",
                dataIndex: "startDate",
                key: "startDate",
                width: 120,
            }, {
                title: "项目结束时间",
                dataIndex: "endDate",
                key: "endDate",
                width: 120,
            }, {
                title: "版本号",
                dataIndex: "version",
                key: "version",
                width: 60,
            }, {
                title: "项目描述",
                dataIndex: "remark",
                key: "remark",
                width: 120,
            }],
            customClick: (record, index) => {
                return {
                    on: { // 事件
                        dblclick: (event) => { },       // 点击行
                        click: (event) => {
                            console.log(record, index);
                            this.mouseId = record.id;
                        },
                        contextmenu: (event) => { },
                        mouseenter: (event) => { },  // 鼠标移入行
                        mouseleave: (event) => { }
                    },
                };
            },
            mouseId: null,
            selectedKeys: [],
            selectedRows: [],
            dataSource: [],
            requestDataDate: null,
            requestData: {
                name: null,//项目名称
                code: null,//项目编码
                startDate: null,//项目开始时间
                endDate: null,//项目结束时间
                leadUserId: null,//负责人ID
                leadUserName: null,//负责人姓名
                version: '',//版本号
                remark: '',//描述
            }
        };
    },
    computed: {
        ...mapState({
            menusMap: state => state.user.menusMap,
            menus: state => state.user.menus,
        })
    },
    watch: {

    },
    created () {
        this.getList();
    },
    updated () {
        Controlwidth("researchSetTable", 100)
    },
    methods: {
        moment,
        rowClassName (record, index) {
            return this.mouseIndex == index ? 'hoverRowStyl' : '';
        },
        cancel () {
            this.operationModal = false;
        },
        clearData () {
            //清空
            this.selectedKeys = [];
            this.selectedRows = [];
        },
        onChangeDateA (data, rows) {
            this.requestData.startDate = rows;
        },
         onChangeDateB (data, rows) {
            this.requestData.endDate = rows;
        },
        onSelectChange (keys, rows) {
            console.log('selected', keys, rows);
            this.selectedKeys = keys;
            this.selectedRows = rows;
        },
        addEdit (type) {
            //type 1:新增 2：修改
            if (type == 1) {
                this.requestData = {}
            } else if (type == 2) {

                if (this.selectedKeys.length != 1) {
                    this.$message.warning('请选择一条数据');
                    return;
                }
                this.requestData = _.cloneDeep(this.selectedRows[0]);
            }
            this.operationModal = true;
        },
        handleSave () {
            //保存
            let { requestData } = this;

            if (!requestData.name) {
                this.$message.warning('项目名称必须填写');
                return;
            }
            requestData.createDate = null;
            saveApi(requestData).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                    this.cancel();
                    this.getList();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        getList () {
            let data = {
                size: 100,
            }
            getListApi(data).then(res => {
                if (res.code === 200) {
                    this.dataSource = res.data.records;
                    this.dataSource.forEach(item => {
                        item.key = item.id;
                    });
                }
            })
        },
        handleDelete () {
            if (this.selectedKeys.length != 1) {
                this.$message.warning('请选择一条数据');
                return;
            }
            let _this = this;
            let data = this.selectedRows[0];
            this.$confirm({
                title: "提示",
                content: <span>是否确认删除项目 <span style="color:red">{data.name}</span>?</span>,
                onOk () {
                    removeApi({ id: data.id }).then((response) => {
                        if (response.code === 200) {
                            _this.$message.success('删除成功');
                            _this.getList();
                            _this.clearData();
                        } else {
                            // _this.$message.warning(response.message);
                        }
                    }).catch((e) => {
                        // _this.$message.error('请求出错', 1)
                    })
                },
                onCancel () { },
            });
        }
    },
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .content-research-set-wrapper {
        margin: 10px;
    }
    .demand-modal {
        label:not(.form-check-label):not(.custom-file-label) {
            font-weight: normal;
        }
        .ant-form-item {
            margin-bottom: 0px;
        }
    }

    .font-color {
        color: rgba(0, 0, 0, 0.85);
    }
    .font-w-title {
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
    }
</style>
